<template>
  <div style="display: flex; align-items: center; font-size: 16px;">
    <span class="time" id="time">
      今天是：
      <span class="date">{{ nowDate }}</span>
      <span class="hour" style="margin: 0 5px;">{{ time.hour }}</span>
      <a class="split">:</a>
      <span class="minutes">{{ time.minutes }}</span>
      <a class="split">:</a>
      <span class="seconds">{{ time.seconds }}</span>
    </span>
  </div>
</template>

<script>
export default {
  name: "DateUtils",
  props: ["s"],
  data() {
    return {
      nowDate: "", // 当前日期
      time: {
        hour: "00",
        minutes: "00",
        seconds: "00",
      },
    };
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.nowDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
      this.time.hour = String(now.getHours()).padStart(2, "0");
      this.time.minutes = String(now.getMinutes()).padStart(2, "0");
      this.time.seconds = String(now.getSeconds()).padStart(2, "0");
    },
  },
  mounted() {
    this.updateTime(); // 初始化时间
    setInterval(this.updateTime, 1000); // 每秒更新一次时间
  },
};
</script>

<style scoped>
.time {
  font-family: Arial, sans-serif;
  color: #333;
}
.split {
  margin: 0 2px;
  color: #555;
}
</style>
